@extends('layouts.app')


@section('title', '节点列表')

@section('js/css')

	<link rel="stylesheet" type="text/css" href="{{ URL::asset('/') }}skin/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="{{ URL::asset('/') }}skin/easyui/themes/icon.css">

@endsection

@section('content')
	<input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
	<fieldset class="layui-elem-field layui-field-title">
	  <legend>节点列表</legend>
	</fieldset>

	<div class="layui-form">
		<button id="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i>新增</button>
        <button class="layui-btn layui-btn-sm" id="btn-expand">全部展开</button>
        <button class="layui-btn layui-btn-sm" id="btn-fold">全部折叠</button>
        <button class="layui-btn layui-btn-sm" id="btn-refresh">刷新表格</button>

	</div>
	
	<div class="layui-form" style="margin-top: 10px">

		<table class="easyui-treegrid" lay-skin="line" id="node-list"></table>	  	

	</div>

@endsection

@section('script')
	<script src="{{ URL::asset('/') }}skin/layui/lay/modules/layer.js"></script>
	<script type="text/javascript">

		layui.config({
	        base: '{{ URL::asset("/") }}skin/'
	    }).extend({
	        treetable: 'treetable-lay/treetable'
	    }).use(['layer', 'table', 'treetable'], function () {
	        var $ = layui.jquery;
	        var table = layui.table;
	        var layer = layui.layer;
	        var treetable = layui.treetable;

	        // 渲染表格
	        var renderTable = function () {//树桩表格参考文档：https://gitee.com/whvse/treetable-lay
	            layer.load(2);
	            treetable.render({
	                treeColIndex: 1,//树形图标显示在第几列
	                treeSpid: 0,//最上级的父级id
	                treeIdName: 'id',//id字段的名称
	                treePidName: 'pid',//pid字段的名称
	                treeDefaultClose: true,//是否默认折叠
	                treeLinkage: true,//父级展开时是否自动展开所有子级
	                elem: '#node-list',
	                url: '{{ url('admin/nodes/get_list') }}',
	                page: false,
	                cols: [[
	                    {type: 'numbers', title: '编号'},
	                    {field: 'name', title: '资源名称'},
	                    {field: 'route', title: '资源路径'},
	                    {field: 'sort', title: '排序'},
	                    {field: 'pid', title: '父级id'},
	                    {field: 'is_menu', title: '应用菜单',
	                    	templet: function(d){
	                    		if(d.is_menu==1){
	                    			return '是';
	                    		}else{
	                    			return '否';
	                    		}
	                        }	
	                    },
	                    {templet: complain, title: '操作'}
	                ]],
	                done: function () {
	                    layer.closeAll('loading');
	                }
	            });
	        };

	        renderTable();
	        
			//触发三个button按钮
	        $('#btn-expand').click(function () {
	            treetable.expandAll('#node-list');
	        });

	        $('#btn-fold').click(function () {
	            treetable.foldAll('#node-list');
	        });

	        $('#btn-refresh').click(function () {
	            renderTable();
	        });
			
	        
	        function complain(d){//操作中显示的内容
	        	if(d.id!=null){
	        		return [
	        				'<div class="layui-btn-group">',
	                        '<a class="operation" lay-event="edit" href="javascript:void(0)" onclick="edit( 0, \''+ d.id + '\')" title="编辑">',
	            	     	'<i class="layui-icon layui-icon-edit"></i></a>',
	            	     	'<a class="operation" lay-event="" href="javascript:void(0)" onclick="deleteNode(\''+ d.id + '\' , \''+ d.name +'\')" title="删除">',
	            	     	'<i class="layui-icon layui-icon-delete" ></i></a>',
	            	     	'</div>'
	            	     	].join('');
	        	}else{
	        		return '';
	        	}
	        	
	        }
	        //监听工具条
	        table.on('tool(permissionTable)', function (obj) {
	            var data = obj.data;
	            var layEvent = obj.event;
				if(data.permissionName!=null){
					if (layEvent === 'del') {
		                layer.msg('删除' + data.id);
		            } else if (layEvent === 'edit') {
		                layer.msg('修改' + data.id);
		            }
				}
	        });
	    });


	    /**
	     * 删除节点
	     */
	    function deleteNode(id, name)
	    {
	    	var _token = $('#_token').val()
	        layer.msg(
	            '确定删除节点--'+name,
	            {
	                icon: 3,
	                time: 10000,
	                btn: ['确认', '取消'],
	                yes: function() {
	                    $.ajax({
	                    	url:'{{ url("admin/nodes/delete")}}/'+id, 
	                    	method: 'DELETE',
	                    	data:{_token: _token},
	                    	success: function(result){
		                        if (result.code == 0) {
		                            layer.msg(result.msg, {icon: 1, time: 2000}, function(){
		                                window.location.reload()
		                            })
		                        } else {
		                            layer.msg(result.msg, {icon: 2, time: 2000})
		                        }
		                    }
	                    })
	                }
	            }
	        )
	    }    

	    $('#add').click(function() {
			layer.open({
		        type: 2 //此处以iframe举例
		        ,title: '新增节点'
		        //,maxmin: true
		        ,area: ['600px', '550px']
		        ,shade: 0.2
		        ,content: '{{ url("admin/nodes/edit") }}/0'	        
		    });
		})
		function edit(pid=0, id=0){
			layer.open({
		        type: 2 //此处以iframe举例
		        ,title: '编辑节点'
		        //,maxmin: true
		        ,area: ['600px', '550px']
		        ,shade: 0.2
		        ,content: '{{ url("admin/nodes/edit") }}/'+pid+'/'+id       
		    });
		}
		
	</script>

@endsection
